<template>
  <a-spin :spinning="loading">
    <div class="cascader">
      <div :class="['cascader-column', styleMediaClass]" v-if="options">
        <cascader-item
          :optionsItem="options"
          :indexLevel="1"
          mode="vertical"
          :selected="selectedLevelOne"
          :tooltip="windowWidth < 1366"
          @handleSelected="handleSelected"
        ></cascader-item>
        <slot name="opearte">
          <div></div>
        </slot>
      </div>
      <div :class="['cascader-column', styleMediaClass]" v-if="selectedLevelOne">
        <cascader-item
          :optionsItem="selectedLevelOne[fieldNames.children]"
          :indexLevel="2"
          :selected="selectedLevelTwo"
          :tooltip="windowWidth < 1366"
          @handleSelected="handleSelected"
        />
      </div>
      <div
        :class="['cascader-column', styleMediaClass]"
        v-if="selectedLevelTwo && windowWidth >= 1000"
      >
        <div class="cascader-column-top">
          <div class="cascader-column-top-close" @click="handleColse">X</div>
        </div>
        <div class="cascader-column-main">
          <div class="cascader-column-left" v-if="!selectedLevelTwo.layout">
            <cascader-item
              :optionsItem="selectedLevelTwo[fieldNames.children]"
              :indexLevel="3"
              :selected="selectedLevelFour"
              :tooltip="windowWidth < 1600"
              :showTitle="windowWidth > 760"
              @handleSelected="handleSelected"
            >
              <template slot="icon-title">
                <div></div>
              </template>
            </cascader-item>
          </div>
          <div class="cascader-column-right">
            <cascader-component
              :cover="cover"
              :proxyName="proxyName"
              :options="selectedLevelThree"
              :layout="selectedLevelTwo.layout || 'biserial'"
            />
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script>
import CascaderItem from './components/CascaderItem.vue'
import CascaderComponent from './components/CascaderComponent.vue'
import window from '../mixins/window'
import { Spin } from 'ant-design-vue';
export default {
  name: 'Cascader',
  mixins: [window],
  components: {
    CascaderItem,
    CascaderComponent,
    [Spin.name]: Spin
  },
  props: {
    proxyName: {
      type: String,
      default: 'tgcos'
    },
    cover: {
      type: String,
      default: ''
    },
    options: { // 数据
      type: Array,
      default: () => []
    },
    defaultSelect: { // 默认选中
      type: Array,
      default: () => []
    },
    fieldNames: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label',
          value: 'value'
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    defaultSelect () {
      this.getCheckedNames(this.options)
    }
  },
  computed: {
    styleMediaClass () {
      if (this.windowWidth < 1366) {
        return 'cascader-column-close'
      }
      return ''
    }
  },
  data () {
    return {
      selectedLevelOne: null,
      selectedLevelTwo: null,
      selectedLevelThree: null,
      selectedLevelFour: null,
      defaultIndex: 0 // 默认选中第一个
    }
  },
  methods: {
    handleSelected (e, index) {
      const label = this.fieldNames.label
      const children = this.fieldNames.children
      if (this.windowWidth < 1000) return
      if (!this.selectedLevelTwo) {
        this.$emit('handleColseOpen', 1)
      }
      if (index === 1) {
        this.selectedLevelOne = e
        if (e[children] && this.defaultSelect.length > 1) {
          const Index = e.children.findIndex(e => e[label] == this.defaultSelect[1])
          this.selectedLevelTwo = e[children][Index]
          this.selectedLevelThree = e[children][Index][children]
        } else {
          this.selectedLevelTwo = null
          this.selectedLevelThree = null
        }
      } else if (index === 2) {
        this.selectedLevelTwo = e
        if (e[children] && e[children].length) {
          this.selectedLevelThree = e.layout ? e[children] : e[children][this.defaultIndex][children]
          this.selectedLevelFour = e[children][this.defaultIndex]
        }
        if (!e[children]) {
          this.selectedLevelThree = null
          this.selectedLevelFour = null
        }
      } else {
        this.selectedLevelThree = e[children] || null
        this.selectedLevelFour = e
      }
    },
    handleColse () {
      this.selectedLevelTwo = null
      this.selectedLevelThree = null
      this.selectedLevelFour = null
      this.$emit('handleColseOpen', 0)
    },
    getCheckedNames (data) {
      const label = this.fieldNames.label
      const children = this.fieldNames.children
      let that = this
      const result = this.defaultSelect
      const keyValue = ['selectedLevelOne', 'selectedLevelTwo', 'selectedLevelFour', 'selectedLevelThree']
      let index = 0
      data.forEach(element => traverse([element]))
      function traverse (element) {
        const key = element.find(e => e[label] === result[index]) || null
        if (key) {
          that[keyValue[index]] = key
          index++
          if (index === result.length) {
            that[keyValue[keyValue.length - 1]] = key[children] || null
          }
          key[children] && key[children].forEach(k => traverse([k]))
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../styles/vars.less";
.cascader {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  color: rgba(lighten(@dark-color, 99.9% - lightness(@dark-color)), 0.6);
  overflow: hidden;
  .cascader-column {
    position: relative;
    font-size: 16px;
    height: 100%;
    &:nth-child(1) {
      flex: 80;
    }
    &:nth-child(2) {
      flex: 130;
      background: #141414;
    }
    &:nth-child(3) {
      flex: 350;
    }
    .cascader-column-top {
      display: flex;
      justify-content: flex-end;
      line-height: 40px;
      height: 40px;
      box-shadow: 0px 1px 0px 0px darken(@dark-color, lightness(@dark-color));
      &-close {
        text-align: center;
        width: 16px;
        height: 40px;
        margin-right: 12px;
        cursor: pointer;
        color: lighten(@dark-color, 99.9% - lightness(@dark-color));
      }
    }
    .cascader-column-main {
      display: flex;
      width: 100%;
      height: calc(100% - 40px);
      .cascader-column-left {
        flex: 110;
        /deep/ .cascader-item-name {
          margin: 0 auto;
          width: calc(100% - 16px);
          padding: 4px;
          box-sizing: border-box;
          text-align: center;
          border-radius: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        /deep/ .cascader-item-horizontal-active {
          .cascader-item-name {
            background-color: #333;
          }
        }
      }
      .cascader-column-right {
        flex: 240;
        height: 100%;
        overflow: auto;
      }
    }
  }
  .cascader-column-close {
    font-size: 12px;
    &:nth-child(1) {
      flex: 100;
      /deep/ .cascader-item-vertical {
        width: calc(100% - 12px);
      }
    }
    &:nth-child(2) {
      flex: 60;
      /deep/ .cascader-item-name {
        display: none;
      }
      /deep/ .cascader-item-horizontal {
        justify-content: center;
        i {
          margin: 0;
        }
      }
    }
  }
}
.ant-spin-nested-loading {
  height: 100%;
  /deep/ .ant-spin-container {
    height: 100%;
  }
  /deep/ .ant-spin-spinning {
    max-height: 100%;
  }
}
</style>
